<template>
  <page-header-wrapper>
    <div class='container'>
      <div class='left'>
        <a-card :bordered='false'>
          <a-row type='flex' justify='space-between'>
            <div class='title'>菜单树</div>
            <a-space>
              <a-button type='primary' @click='setAddForm' :disabled='selectedKeys.length===0'>新增</a-button>
              <a-button type='info' @click='setEditForm' :disabled='selectedKeys.length===0 || selectedKeys[0]===0'>编辑</a-button>
              <a-popconfirm title='是否要删除选中菜单?' ok-text='确认' cancel-text='取消' @confirm='deleteMenu'>
                <a-button type='danger' :disabled='selectedKeys.length===0 || selectedKeys[0]===0'>删除</a-button>
              </a-popconfirm>
            </a-space>
          </a-row>
          <a-divider />

          <a-tree
            v-if="treeData.length > 0"
            :selectedKeys='selectedKeys'
            :tree-data='treeData'
            @select='onSelect'
            :defaultExpandAll='true'
          />
        </a-card>
      </div>
      <div class='right'>
        <a-card :bordered='false' v-show='showForm'>
          <a-row type='flex' justify='space-between'>
            <div class='title'>菜单详情</div>
            <a-space>
              <a-button type='primary' @click='submit'>保存</a-button>
            </a-space>
          </a-row>
          <a-divider />
          <a-form class='form-content' @submit='submit' :form='form'>
            <a-form-item
              label='菜单name'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-input
                v-decorator="[
                  'name',
                  {rules: [{ required: true, message: '该项必填' }]}
                ]"
                placeholder="请输入菜单name" />
            </a-form-item>
            <a-form-item
              :hidden='true'
              label='id'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-input-number
                v-decorator="[
                  'id',
                ]" />
            </a-form-item>
            <a-form-item
              label="父级菜单"
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-tree-select
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="请选择父级菜单"
                tree-default-expand-all
                v-decorator="[
                  'parentId',
                  {rules: [{ required: true, message: '该项必填' }]}
                ]"
              />
            </a-form-item>
            <a-form-item
              label='前端组件名（首字母大写）'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-input
                v-decorator="[
                  'component',
                  {rules: [{ required: true, message: '该项必填' }]}
                ]"
                placeholder="请输入前端组件名" />
            </a-form-item>
            <a-form-item
              label='重定向地址'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-input
                v-decorator="[
                  'redirect',
                ]"
                placeholder="请输入重定向地址" />
            </a-form-item>
            <a-form-item
              label='地址'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-input
                v-decorator="[
                  'path',
                  {rules: [{ required: true, message: '该项必填' }]}
                ]"
                placeholder="请输入地址" />
            </a-form-item>
            <a-form-item
              label='外部地址打开方式'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-select
                v-decorator="[
                  'meta.target',
                ]"
                placeholder="请选择外部地址打开方式"
                :options="[{label:'原窗口',value:'_self'},{label: '新窗口',value: '_blank'}]"
              />
            </a-form-item>
            <a-form-item
              label='菜单展示名字'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-input
                v-decorator="[
                  'meta.title',
                  {rules: [{ required: true, message: '该项必填' }]}
                ]"
                placeholder="请输入菜单展示名字" />
            </a-form-item>
            <a-form-item
              label='菜单栏显示'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-select
                v-decorator="[
                  'meta.show',
                  {rules: [{ required: true, message: '该项必填' }]}
                ]"
                placeholder="请选择菜单栏显示"
                :options="[{label:'显示',value:1},{label: '隐藏',value: 0}]"
              />
            </a-form-item>
            <a-form-item
              label='菜单图标'
              :labelCol='{span: 7}'
              :wrapperCol='{span: 16 }'>
              <a-input
                v-decorator="[
                  'meta.icon',
                ]"
                placeholder="请输入菜单图标名（antdv官网获取）" />
            </a-form-item>
          </a-form>
        </a-card>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
import { menuAdd, menuDeleteById, menuList, menuUpdateById } from '@/api/system/menuManage'
// 数组转树
function arrayToTree(array, parentId = 0) {
  const result = [];
  for (let item of array) {
    item.title = item.meta.title
    item.key = item.id
    item.value = item.id
    if (item.parentId === parentId) {
      const children = arrayToTree(array, item.id);
      if (children.length) {
        item.children = children;
      }
      result.push(item);
    }
  }
  return result;
}

export default {
  name: 'TableList',
  components: {},
  data() {
    return {
      autoExpandParent: true,
      treeData:[],
      selectedKeys: [],
      form: this.$form.createForm(this),
      originMenuList: [],
      showForm: false
    }
  },
  created() {
    this.initTreeData()
  },
  computed: {},
  methods: {
    initTreeData(){
      menuList().then((res)=>{
        let dataList = res.data.dataList
        this.originMenuList = dataList
        let root = {
          key: 0,
          value:0,
          title:'顶点',
          children:[]
        }
        let tree = arrayToTree(dataList)
        console.log(tree)
        root.children = tree
        this.treeData = [root]
        // console.log(this.treeData)
      })
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info,selectedKeys)
      this.selectedKeys = selectedKeys
      this.form.resetFields()
    },
    setAddForm() {
      console.log(this.selectedKeys)
      this.showForm = true
      this.form.resetFields()
      this.form.setFieldsValue({
        parentId:this.selectedKeys[0],
      })
    },
    setEditForm(){
      this.showForm = true
      let selectedItem = this.originMenuList.find((item)=>{
        return item.id === this.selectedKeys[0]
      })
      console.log(selectedItem)
      this.form.setFieldsValue({
        id: selectedItem.id,
        parentId: selectedItem.parentId,
        name:selectedItem.name,
        component: selectedItem.component,
        redirect: selectedItem.redirect,
        path: selectedItem.path,
        meta: {
          title: selectedItem.meta.title,
          show: selectedItem.meta.show ? 1:0,
          icon: selectedItem.meta.icon,
          target: selectedItem.meta.target,
        }
      })
    },
    deleteMenu() {
      console.log('执行删除')
      menuDeleteById({id:this.selectedKeys[0]}).then(()=>{
        this.$message.success('删除菜单成功')
        this.initTreeData()
        this.showForm = false
      })
    },
    submit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          values.meta.show = !!values.meta.show
          if(values.id){
            menuUpdateById(values).then(()=>{
              this.$message.success('修改菜单成功')
              this.initTreeData()
              this.showForm = false
            })
          }else{
            menuAdd(values).then(()=>{
              this.$message.success('新增菜单成功')
              this.initTreeData()
              this.showForm = false
            })
          }

        }
      })
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val, this.selectedKeys)
    },
    selectedKeys() {
      this.showForm = false
    }
  }
}
</script>

<style lang='less' scoped>
.container {
  display: flex;
  justify-content: space-between;

  .left {
    width: 48%;

    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .right {
    width: 48%;
    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .form-content {
    }
  }
}


</style>

